<template>
  <el-card>
    <h1 class="me-author-name">Hadoop</h1>
    <div class="me-author-description">
      <span><i class="el-icon-location-outline"></i> &nbsp;广东&广州</span>
      <span><i class="me-icon-job"></i> &nbsp;Java初级开发工程师</span>
    </div>
    <div class="me-author-tool">
      <i @click="showTool(qq)" :title="qq.title"
        ><svg
          t="1617850381269"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5555"
          width="32"
          height="32"
        >
          <path
            d="M0 512C0 229.233778 229.233778 0 512 0s512 229.233778 512 512-229.233778 512-512 512S0 794.766222 0 512z m500.110222-283.591111c-4.039111 2.503111-10.695111 0.682667-16.014222 1.991111-13.141333 3.214222-27.022222 5.973333-38.997333 10.979556-51.285333 21.532444-85.191111 58.595556-104.96 112.014222-5.745778 15.445333-13.397333 42.24-9.045334 62.976 0.938667 4.408889-0.910222 10.012444 1.024 13.027555-0.284444 12.572444-5.973333 12.288-9.984 19.996445-5.973333 11.463111-7.964444 39.253333 0.967111 49.009778-4.551111 6.826667-11.320889 12.344889-15.985777 19.000888-15.018667 21.361778-23.893333 42.951111-32 71.964445-3.811556 13.653333-6.826667 38.200889-1.991111 54.044444 1.763556 5.888 5.916444 10.439111 8.988444 14.961778 19.911111 3.896889 44.202667-20.764444 51.996444-32.995555 4.835556 6.257778 5.603556 23.921778 9.016889 32 6.485333 15.36 17.834667 35.015111 30.976 44.003555-3.072 5.603556-16.213333 7.025778-21.987555 10.012445-15.047111 7.765333-30.549333 18.659556-34.986667 36.977777-5.404444 22.328889 23.893333 34.901333 37.973333 40.021334 46.08 16.867556 131.185778 1.792 147.996445-31.004445 5.575111 0.113778 16.327111 1.393778 19.996444-0.995555 12.174222 0.426667 20.252444 13.568 29.013334 19.029333 14.193778 8.760889 64.853333 24.803556 92.017777 18.944 26.453333-5.688889 79.189333-15.559111 63.004445-53.959111a62.805333 62.805333 0 0 0-6.997333-11.036445c-6.599111-8.817778-21.504-17.408-32.028445-21.987555-4.664889-2.048-9.301333-2.161778-12.999111-5.006222-0.056889-4.778667 10.496-12.856889 13.994667-17.976889 9.528889-13.852444 21.617778-33.450667 22.016-55.011556 4.721778 2.332444 6.940444 7.936 9.984 12.003556 7.623111 10.126222 23.409778 23.978667 38.030222 26.993778 0.739556-0.682667 2.190222-1.336889 2.986667-1.991112 7.708444-5.489778 14.023111-39.992889 9.984-57.002666-4.664889-19.825778-6.656-38.257778-13.994667-54.983111-6.940444-15.872-17.720889-29.696-25.998222-44.032H711.111111v-0.995556c23.096889-14.876444 17.152-69.319111-9.984-74.979555 0.142222-15.189333 3.470222-34.986667 0-50.005334-22.101333-95.004444-82.602667-157.496889-201.016889-155.989333z"
            p-id="5556"
          ></path></svg
      ></i>
      &nbsp; &nbsp; &nbsp; &nbsp;

      <i @click="showTool(gitee)" :title="gitee.title"
        ><svg
          t="1617850460754"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7138"
          width="32"
          height="32"
        >
          <path
            d="M0 520.885677c0-69.367742 13.510194-135.696516 40.497548-199.019354 26.987355-63.322839 63.322839-117.826065 109.006452-163.509678 45.650581-45.650581 100.153806-81.986065 163.509677-109.006451A502.288516 502.288516 0 0 1 512 8.91871c69.33471 0 135.663484 13.477161 198.986323 40.497548 63.355871 26.987355 117.859097 63.322839 163.509677 109.006452 45.683613 45.650581 82.019097 100.153806 109.006452 163.509677A502.288516 502.288516 0 0 1 1024 520.852645c0 111.31871-32.503742 211.472516-97.511226 300.494452-64.974452 88.988903-148.48 150.82529-250.483613 185.476129-5.351226 0-9.348129-0.990968-11.990709-2.972903-2.675613-1.981935-4.195097-3.996903-4.52542-6.011871a59.458065 59.458065 0 0 1-0.495484-8.984775 7.663484 7.663484 0 0 1-0.990967-3.005935V856.856774c0-40.629677-14.336-75.313548-43.008-103.985548 76.667871-13.345032 134.011871-41.818839 171.998967-85.487484 37.987097-43.668645 57.013677-96.520258 57.013678-158.521807 0-58.004645-18.663226-108.345806-56.02271-150.990451 13.345032-42.677677 10.999742-87.667613-6.969806-135.002839-18.696258-1.32129-39.011097 1.849806-61.010581 9.51329-21.999484 7.663484-38.317419 14.831484-49.019871 21.470968-10.636387 6.672516-20.314839 13.01471-28.96929 19.026581-38.680774-10.669419-81.853935-16.020645-129.486452-16.020645-47.698581 0-90.508387 5.351226-128.528516 16.020645-7.333161-5.351226-15.855484-11.164903-25.500903-17.507097-9.678452-6.342194-26.491871-14.005677-50.506323-22.990452-23.981419-9.017806-45.650581-12.849548-65.007484-11.495225-18.663226 47.995871-20.645161 93.646452-5.978838 136.984774-36.665806 42.677677-54.99871 92.985806-54.99871 150.990451 0 62.001548 18.663226 114.688 55.989677 157.993291 37.326452 43.338323 94.670452 72.010323 171.998968 86.016a142.302968 142.302968 0 0 0-39.969032 70.028387c-56.683355 13.972645-96.355097 3.963871-119.015226-30.059355-42.017032-61.307871-79.673806-83.307355-113.003355-65.965419-4.690581 4.657548-3.996903 9.480258 1.981936 14.501161 6.011871 4.987871 14.996645 11.660387 27.020387 19.984516 11.99071 8.357161 20.975484 17.507097 26.987355 27.515871 0.660645 1.32129 2.510452 6.177032 5.516387 14.501161 2.972903 8.324129 5.978839 16.317935 8.984774 23.98142 2.972903 7.663484 8.654452 16.185806 17.011613 25.500903 8.324129 9.348129 18.002581 17.176774 29.002322 23.518968 10.999742 6.309161 26.161548 10.999742 45.48542 14.005677 19.323871 2.972903 41.323355 3.138065 65.998451 0.495484v100.484129c0 0.990968-0.165161 2.642581-0.495484 5.020903-0.330323 2.312258-0.990968 3.963871-1.981935 4.954839-0.990968 1.024-2.34529 2.014968-4.029935 3.038968a12.519226 12.519226 0 0 1-6.474323 1.486451c-2.675613 0-6.011871-0.330323-10.008774-0.990967-101.342968-35.344516-183.824516-97.180903-247.51071-185.509162C31.843097 731.036903 0 631.576774 0 520.91871z"
            p-id="7139"
          ></path></svg
      ></i>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "CardMe",
  data() {
    return {
      qq: { title: "QQ", message: "976189511" },
      gitee: {
        title: "gitee",
        message:
          '<a target="_blank" href="https://gitee.com/hjccc/newblog.git">https://gitee.com/hjccc/newblog.git</a>',
      },
    };
  },
  methods: {
    showTool(tool) {
      this.$message({
        duration: 1500,
        showClose: true,
        dangerouslyUseHTMLString: true,
        message: "<strong>" + tool.message + "</strong>",
      });
    },
  },
  created() {},
};
</script>

<style scoped>
.me-author-name {
  text-align: center;
  font-size: 30px;
  border-bottom: 1px solid #5fb878;
}

.me-author-description {
  padding: 8px 0;
}

.me-icon-job {
  padding-left: 16px;
}

.me-author-tool {
  text-align: center;
  padding-top: 10px;
}

.me-author-tool i {
  cursor: pointer;
  padding: 4px 10px;
  font-size: 30px;
}
</style>
